import React, { FC, useState } from "react";
import styles from './QuestionCard.module.scss'
import { Button, Badge, Divider, Tooltip, Space, Tag, QRCode, Popover, Popconfirm, message } from 'antd';
import { DeleteOutlined, CopyFilled, StarFilled, FundFilled, EditFilled, LinkOutlined, StarOutlined } from '@ant-design/icons';
import { useNavigate, Link, useLocation } from 'react-router-dom'
import { useRequest } from 'ahooks'
import { updateQuestionService, duplicateQuestionService } from '.././services/question'
type PropsType = {
    _id: string
    title: string
    isStar: boolean
    isPublished: boolean
    answerCount: number
    createdAt: string
}

const QuestionCard: FC<PropsType> = (props: PropsType) => {
    const { _id, title, createdAt, isPublished, answerCount, isStar } = props
    const nav = useNavigate()
    const { pathname } = useLocation()
    const httpText = `http://localhost:3000`

    //修改标星
    const [isStarState, setIsStarState] = useState(isStar)
    const { loading: changeStarLoading, run: changeStar } = useRequest(async () => {
        await updateQuestionService(_id, { isStar: !isStarState })
    }, {
        manual: true,
        onSuccess(res) {
            setIsStarState(!isStarState)//更新state
            message.success('已更新')
        }
    })
    //复制功能
    const { loading: changeCopyLoading, run: changeCopy } = useRequest(
        async () => await duplicateQuestionService(_id)
        , {
            manual: true,
            onSuccess(res) {
                message.success('已复制')
                nav(`/question/edit/${res.id}`)
            }
        })
    //删除功能
    const [isDeletedState,setIsDeletedState]=useState(false)
    const { loading:deleteLoading, run:deleteQuestion } = useRequest(
        async () => await updateQuestionService(_id, { isDeleted: true }),
        {
            manual: true,
            onSuccess(res) {
                message.success('已移入回收站')      
                setIsDeletedState(true)    
            }
        })
    //已经删除的问卷，不再渲染
    if(isDeletedState) return null
    return <>
        <div className={styles.container}>
            <div className={styles.content}>
                <div className={styles.title}>
                    <div className={styles.left}>
                        <Link className={styles['content-title']} to={isPublished ? `/question/stat/${_id}` : `/question/edit/${_id}`}>
                            <Space>
                                {isStarState && <StarFilled className={styles.star} />}
                                {title}

                                {/* <Popover overlayInnerStyle={{ padding: 0 }} content={<QRCode size={100} value={httpText + pathname +"/"+ _id} bordered={false} />}>
                                    <LinkOutlined />
                                </Popover> */}
                            </Space>
                        </Link>

                    </div>
                    <div className={styles.right}>
                        <Space>
                            <Tag bordered={false} color={isPublished ? "success" : ''}>
                                <Space>
                                    <Badge status={isPublished ? "success" : 'default'} />
                                    {isPublished ? <span> 已发布</span> : <span>未发布</span>}
                                </Space>
                            </Tag>
                            <span>答卷 : {answerCount}</span>
                            <span className={styles.time}>{createdAt}</span>
                        </Space>
                    </div>
                </div>
                <Divider style={{ margin: '15px 0px' }} />
                <div className={styles['button-container']}>
                    <div className={styles.left}>
                        <Button type="text" size="small" onClick={() => nav(`/question/edit/${_id}`)}><EditFilled style={{ color: '#4b97ce' }} />编辑问卷</Button>
                        <Button type="text" size="small" disabled={!isPublished} onClick={() => nav(`/question/stat/${_id}`)}><FundFilled style={{ color: '#627ce5' }} />数据统计</Button>
                    </div>
                    <div className={styles.right}>
                        <Tooltip placement="top" title={isStarState ? '取消标星' : '标星'} arrow={false}>
                            <Button type="text" size="small" onClick={changeStar} disabled={changeStarLoading}>
                                {isStarState ? <StarFilled className={styles.star} /> : <StarOutlined />}
                            </Button>
                        </Tooltip>
                        <Tooltip placement="top" title='复制' arrow={false}>
                            <Button type="text" size="small" onClick={changeCopy} className={styles.copy} disabled={changeCopyLoading}><CopyFilled /></Button>
                        </Tooltip>
                        <Popconfirm
                            title="您真的要删除吗?"
                            okText="确定"
                            cancelText="取消"
                            onConfirm={deleteQuestion}
                        ><Button  disabled={deleteLoading} danger type="text" size="small"><DeleteOutlined /></Button>
                        </Popconfirm>
                    </div>
                </div>
            </div>
        </div>
    </>
}

export default QuestionCard